<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			#d1{margin:100px 0;height:500px;background: url(jsChapter09/bdqn/reg-mobile.jpg) no-repeat;
			padding: 40px;}
			#d1-1{width: 900px;margin:0 auto;}
			#zhuce{background-color:white ;}
			#zhuce:after{content: '';clear: both;display: block;}
            #d1 ul{list-style: none;}
            #d1 ul li{color:white;background-color: #2361B4 ;padding: 10px 30px;margin-right:5px ;}
            #d1 ul li:last-of-type{background-color:white ;color: #2361B4; }
            #d1 #d1-1 #xuanze li {float: left;}
            #zhuce {clear: both;font-size: 12px;color: #C6C6C6;}
           #left,#right{float:left;padding: 40px;}
           #left{border-right:1px #C6C6C6 dashed ;}
           #left div{margin: 15px 10px;position: relative;}
           #left .img{position: absolute;top: 13px; left: 10px;}
           #d1_3 a{margin-top:0px ;border: 1px #999999 solid;display: inline-block;height: 36px;}
         
           input{padding: 10px 30px;}
           #d1_6 input{color: white;background-color:#55ABE8 ;border: 1px #55ABE8 solid;margin-left: 100px;border-radius:10px ;padding: 10px 70px;}
           #d1_5{padding-left:100px ;}
          
        #right a{
        	display: inline-block;padding: 10px 40px;background-color:#55ABE8 ;color: white;text-decoration: none;font-size: 14px;font-weight: bolder;border-radius:10px ;
        }
		</style>
		<script src="jsChapter09/js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#email").blur(emaill);
				$("#lname").blur(namey);
				$("#mima").blur(pass);
				$("#yzm").blur(rpass);
				$("#yzmima").blur(yzenm);
				$("#form").submit(function(){
		var flag=emaill()&namey()&pass()&rpass()&pass()&yzenm();
//		false为0 true 为1
		return flag>0;
	});
				
				
			});

function emaill(){
//	var reg =/^[\u4E00-\u9FA5]{1,8}$/;
					var reg=/^\w+@\w+(\.[a-z]{2,3}){1,2}$/;
					var $name=$("#email");
						$name.next().next().css("color","red");
					
					if($name.val()==""){
						$name.next().next().html("×邮箱不能为空");
						return false;
					}
					if(!(reg.test($name.val()))){
		$name.next().next().html("×邮箱格式不正确");
		return false;
	}
		$name.next().next().html("√");
						return true;
				}
function namey(){
var reg=/^\w{4,12}$/;
	var $name=$("#lname");
						$name.next().next().css("color","red");
	if($name.val()==""){
						$name.next().next().html("×昵称不能为空");
						return false;
	}
								if(!(reg.test($name.val()))){
		$name.next().next().html("×注意输入4-12位字符、英文、数字或者中文");
		return false;
	}$name.next().next().html("√");
						return true;
	
}
function pass(){
	var reg=/^\w{6,16}$/;
	var $name=$("#mima");
						$name.next().next().css("color","red");
	
	if($name.val()==""){
						$name.next().next().html("×密码不能为空");

						return false;
					}
								if(!(reg.test($name.val()))){
		$name.next().next().html("×注意输入6-16位字符或数字、字母,区分大小写");
		return false;
	}$name.next().next().html("√");
						return true;
}
function rpass(){
	var $name1=$("#mima");
	var $name=$("#yzm");
						$name.next().next().css("color","red");
	
	if($name.val()==""){
						$name.next().next().html("×密码不能为空");

						return false;
					}
								if(!($name.val()==$name1.val())){
		$name.next().next().html("×密码不一致");
		return false;
	}$name.next().next().html("√");
						return true;
}
	function yzenm(){
		var $name=$("#yzmima");
		$name.next().next().next().css("color","red");
		if($name.val()==""){
						$name.next().next().next().html("×验证码不能为空");
			return false;
		}
		if($name.val().toLocaleLowerCase()!="gaae"){
						$name.next().next().next().html("×验证码错误");
			return false;
		}
		$name.next().next().next().html("√");
						return true;
	}
		</script>
	</head>

	<body>
		<section>
			<div id="d1">
				<div id="d1-1">
					<ul id="xuanze">
						<li>手机注册</li>
						<li>邮箱注册</li>
					</ul>
					<div id="zhuce">
						<!--注册左侧-->
						<div id="left">
							<form action="http://bdqn.cn" method="post" id="form">
									<div id="d1_1">
									<input type="email" name="mobile" placeholder="请输入您的常用箱" id="email" size="30" /><img src="jsChapter09/bdqn/login-input5.png" class="img"/>
									<span id="span1">请输入您的常用箱</span>

								</div>
								<div id="d1_2">
									<input type="text" name="mobile" placeholder="请输入昵称" id="lname" size="30" /><img src="jsChapter09/bdqn/login-input1.png" class="img"/>
									<span id="s1">
4-12位字符、英文、数字或者中文均可</span>

								</div>
								<div id="d1_0">
									<input type="password" name="mobile" placeholder="请输入密码" id="mima" size="30" /><img src="jsChapter09/bdqn/login-input2.png" class="img"/>
									<span >6-16位字符或数字、字母,区分大小写</span>

								</div>
											<div id="d1_4">
										<input type="password" name="yzm" placeholder="请再次输入密码" id="yzm" size="30"  /><img src="jsChapter09/bdqn/login-input2.png" class="img"/>
										<span "></span>
									</div>
								<div id="d1_3">
									<input type="text" name="yzm" placeholder="请输入右侧验证码" id="yzmima"  size="15" /><img src="jsChapter09/bdqn/login-input3.png" class="img"/>
								<a href="#">
									<img src="jsChapter09/bdqn/59a11fa7365d1.png" height="25px" width="70px"/>	</a><span>不区分大小写 点击图片可以更换</span></div>

								<div id="d1_5">
									<input type="checkbox" class="agreeCheck" id="agree" checked/> 同意
									<a href="#">用户服务条款</a>
								</div>

								<div id="d1_6">
									<input type="submit" value="注册" />
								</div>
							</form>

						</div>
						<!--注册右侧-->
						<div id="right">
							<a href="#">已有帐号，马上登录</a>
						</div>
					
					</div>
				</div>

		</section>
	</body>

</html>